<template>

    <div class="app-container">
        <el-form :inline="true" :model="search" >
            <el-form-item label="任务状态">
                <el-select v-model="search.order_status" placeholder="请选择">
                    <el-option label="成功" value="1"></el-option>
                    <el-option label="处理中" value="0"></el-option>
                    <el-option label="取消中" value="8"></el-option>
                    <el-option label="部分退款" value="9"></el-option>
                    <el-option label="全额退款" value="10"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
                <el-select v-model="search.date_Between" placeholder="时间范围">
                    <el-option label="发布时间" value="send_time"></el-option>
                    <el-option label="开始时间" value="begin_time"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="search.dates"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="查找类型">
                <el-select v-model="search.keyword_type" placeholder="请选择">
                    <el-option label="全部字段" value="1"></el-option>
                    <el-option label="商品关键字" value="0"></el-option>
                    <el-option label="任务ID" value="8"></el-option>
                    <el-option label="任务类型" value="9"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="搜索关键字">
                <el-input v-model="search.keyword" placeholder="请输入搜索关键字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="searchs">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" style="width: 100% " :stripe="true">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <p>任务ID： {{ props.row.order_id }}</p>
                    <p>关键字： {{ props.row.keyword }}</p>
                    <p>淘口令： {{ props.row.taobao_token }}</p>
                    <p>商品ID： {{ props.row.goods_id }}</p>
                    <p>任务类型： {{ props.row.task_name }}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" type="index" width="50"></el-table-column>
            <el-table-column align="center" :show-overflow-tooltip="true" prop="keyword" label="关键字"></el-table-column>
            <el-table-column  prop="order_price" label="消耗">
                <template slot-scope="scope">
                    {{ scope.row.order_price }}<font color="#409EFF">流量币</font>
                </template>
            </el-table-column>
            <el-table-column align="center" label="发布量/剩余">
                <template slot-scope="scope">
                    <p><font color="#409EFF">{{ scope.row.count }}</font><font color="#F56C6C">/</font><font
                            color="#E6A23C">{{ scope.row.complete_count }}</font></p>
                </template>
            </el-table-column>
            <el-table-column label="展现/剩余" align="center">
                <template slot-scope="scope">
                    <p>{{ scope.row.show }}/{{ scope.row.complete_show }}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="send_time" label="发布时间" :formatter="dateFormat"></el-table-column>
            <el-table-column align="center" prop="begin_time" label="任务开始时间" :formatter="dateFormat"></el-table-column>
            <el-table-column align="center" prop="send_day" label="发布天数"></el-table-column>
            <el-table-column align="center" prop="remark" label="备注"></el-table-column>
            <el-table-column align="center" label="任务状态">
                <template slot-scope="scope">
                    <font :color="order_status[scope.row.order_status]['color']">{{
                        order_status[scope.row.order_status].text }}</font>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button @click="cancel_task(scope.row)" type="text" size="small">取消</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[3,10,30, 200, 300, 400]"
                    :page-size="limit"
                    @current-change="current_change"
                    @size-change="handleSizeChange"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import { View, cancel, submit, get_task } from '@/api/task'

  export default {
    data() {
      return {
        list: [],
        count: 0,
        limit: 10,
        currentPage: 1,
        order_status: {
          '-9': { text: '订单未提交，未扣款（提示各种异常）', color: 'read' },
          '1': { text: '成功', color: '#90939' },
          '0': { text: '处理中', color: '#67C23A' },
          '8': { text: '取消任务中', color: '#E6A23C' },
          '9': { text: '部分退款', color: '#E6A23C' },
          '10': { text: '全额退款', color: '#F56C6C' }
        },
        search:{
          order_status: '',
          date_Between:'',
          dates:'',
          keyword:'',
          keyword_type:''
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    created() {
      this.fetch_task(1, this.limit)
    },
    methods: {
      fetch_task(page, limit, where = '') {
        get_task({ 'page': page, 'limit': limit, 'where':where }).then(res => {
          this.list = res.data.list
          this.count = res.data.count
        }).catch(error => {
          console.log(error)
        })
      },
      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
      handleSizeChange(val) {
        this.limit = val
        this.fetch_task(1, this.limit)
        console.log(this.limit)
      },
      current_change: function(currentPage) {
        this.fetch_task(currentPage, this.limit)
      },
      cancel_task(row) {
        cancel({ 'id': row.order_id }).then(res => {
          console.log(res)
        }).catch(error => {
          console.log(error)
        })
      },
      searchs(){
        this.fetch_task(1,this.limit,this.search)
      },
      dateFormat: function(row, column) {
        var timeStamp = row[column.property]
        if (timeStamp == undefined) {
          return ''
        }
        var date = new Date()
        date.setTime(timeStamp * 1000)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        var minute = date.getMinutes()
        var second = date.getSeconds()
        minute = minute < 10 ? ('0' + minute) : minute
        second = second < 10 ? ('0' + second) : second
        return y + '-' + m + '-' + d
      }
    }

  }
</script>
